<template>
	<view class="content">
		<view class="title-text">
			<text class="">你好，</br>欢迎注册绿地安全卫士</text>
		</view>
		<view class="photo">
			<fui-input placeholder="请输入手机号" :clearable="true" 
			required v-model="Rphone">
				<template v-slot:left>
					<!-- <view class="fui-left__icon">
						<fui-icon name="mobile" color="#333" :size="48"></fui-icon>
					</view> -->
				</template>
			</fui-input>
		</view>
		<view class="password">
			<fui-input :padding="['20rpx','32rpx']" placeholder="请输入密码" 
			:bottomLeft="0" :password="!showPwd" v-model="Rpwd"
				:clearable="true" required>
				<template v-slot:left>
					<!-- <view class="fui-left__icon">
						<fui-icon name="captcha" :size="48"></fui-icon>
					</view> -->
				</template>
				<fui-icon name="invisible" :size="48" v-if="!showPwd" @click="showPassword()"></fui-icon>
				<fui-icon name="visible" :size="48" v-if="showPwd" @click="showPassword()"></fui-icon>
			</fui-input>
		</view>
		<view class="password">
			<fui-input :padding="['20rpx','32rpx']" placeholder="请确认密码" 
			:bottomLeft="0" :password="!showPwd" :clearable="true" required 
			v-model="requestPwd">
				<fui-icon name="invisible" :size="48" v-if="!showPwd" @click="showPassword()"></fui-icon>
				<fui-icon name="visible" :size="48" v-if="showPwd" @click="showPassword()"></fui-icon>
			</fui-input>
		</view>
		<view class="login-btn">
			<fui-button radius="96rpx" background="#348669" @click="regiest">注册</fui-button>
		</view>
		<view class="regiest-text">
			<text @click="showOtherLogin()">其他注册</text><span @click="naviToLogin()">登录</span>
		</view>
		<fui-actionsheet :show="showOLogin" :isCancel="true" :itemList="itemList" @click="otherLogin"
			@cancel="isntShow"></fui-actionsheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '',
				showPwd: false,
				showOLogin: false,
				itemList: [
					'微信', 'QQ'
				],
				Rphone:'',
				Rpwd:'',
				requestPwd:''
			}
		},
		onLoad() {},
		methods: {
			showPassword() {
				this.showPwd = !this.showPwd
			},
			showOtherLogin() {
				this.showOLogin = !this.showOLogin
			},
			otherLogin(obj) {
				console.log(obj)
				this.$utils.msg(obj.text)
			},
			isntShow() {
				this.showOLogin = !this.showOLogin
			},
			naviToLogin() {
				this.$utils.navigateTo("ModelPage/login", "")
			},
			regiest(){
				if(this.Rpwd != this.requestPwd){
					this.$utils.errorMsg("确认密码不正确")
					return
				}
				if(this.Rphone == ''){
					this.$utils.errorMsg("手机号不能为空")
					return
				}
				let user = {
					"phone":this.Rphone,
					"password":this.Rpwd
				}
				this.$http.register(user).then(response=>{
					this.$utils.sucessMsg("注册成功")
					setTimeout(()=>{
						this.$utils.navigateTo("ModelPage/login",'')
					},3000)
					console.log(response)
				}).catch(error=>{
					this.$utils.errorMsg(error.data.msg)
					console.log(error)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #ffffff;
		height: 100%;
		width: 100%;
	}

	.content {
		margin: 20rpx;
	}

	.title-text {
		margin: 40rpx;
		margin-left: 30rpx;
		font-size: 50rpx;
		font-weight: bolder;
		line-height: 80rpx;
	}

	.photo {
		margin-top: 150rpx;
	}

	.password {
		margin-top: 50rpx;
	}

	.forget-text {
		position: absolute;
		left: 75%;
	}

	.login-btn {
		margin-top: 150rpx;

	}

	.regiest-text {
		margin-top: 100rpx;
		margin-left: 250rpx;

		span {
			margin-left: 50rpx;
			color: #007AFF;
		}
	}
</style>
